<template>
  <a-button v-bind="$attrs" v-on="$listener" :style="colorStyle">
    <template #icon>
      <slot name="icon"></slot>
    </template>
    <slot></slot>
  </a-button>
</template>

<script>
import { Button } from "ant-design-vue";


export default {
  name: "UIButton",
  components: {
    AButton: Button
  },
  props: {
    color: {
      type: String,
      default: () => {
        return "";
      },
    },
  },
  data() {
    return {
      colorStyle: {},
      colorStr: "",
    };
  },
  methods: {
    getColor() {
      if (this.color) {
        this.colorStr = this.color;
      }
      if (this.colorStr) {
        this.colorStyle.background = this.colorStr;
        this.colorStyle.borderColor = this.colorStr;
      }
    },
  },
  created () {
    this.getColor();
  }
};
</script>

<style lang="less" scoped>
</style>